<template>
	<view>	
		<view v-if="!hid" class="flex-row-center" :style="{'top':scHight}" style="width: 750rpx;
		position: fixed;z-index: 10;left: 0;">
			<view class="flex-column-center" style="background-color: #fcfcfc;
			padding: 30rpx;border-radius: 10rpx;">

				<movable-area class="flex" style="width: 100%;" :style="{'height':th}">				
					<movable-view  damping=50 :x="moveX"  :style="{'height':ph,'width':pw}" style="z-index: 10;" direction="horizontal">
						<image :src="imgbk" mode="aspectFit" :style="{'height':ph,'width':pw,'margin-top':imgbKH}"  ></image>
					</movable-view>
					<image :src="img" mode="aspectFit" :style="{'height':th,'width':tw}"
					style="border-radius: 10rpx;"></image>			
				</movable-area>
				<movable-area class="flex-row-start" style="width: 100%;background-color: #efefef;height: 80rpx;
				border-radius: 40rpx;margin-top: 30rpx;">
					
						<movable-view damping=50 :x="movePv" inertia="true" friction="1" class="flex-row-center" style="border-radius: 50%;height: 100rpx;width: 100rpx;
						background-color: #ffffff;border: 2rpx solid #e3e3e3;margin-top: -13rpx;" 
						direction="horizontal" @change="moveChange" @touchend="end" 	 >
							<view :class="endLoad?'cuIcon-right':'cuIcon-loading turn-load'" style="color: #27b58b;font-size: 40rpx;">
								
							</view>
						</movable-view>
					
					<text style="padding-left: 140rpx;" :style="{'color':col}">{{hasImg}}</text>
				</movable-area>
				<view class="flex-row-around padding-top" style="width: 100%;">

						<view @click="hide" class="cuIcon-close" style="font-size: 50rpx;color: #e25915;">
						</view>
					
					<text class="cu-tag bg-cyan round" @click="getCode">刷新拼图</text>
					<text class="my-neirong-sm cuIcon-safe" style="color: #c1c1c1;">由鸡办提供技术支持</text>
				</view>
			</view>
			
			
		</view>
		<view @click="hide" class="flex-row-around" style="border-radius: 10rpx;
		background-color: #ebebeb;" :style="{'width':width,'height':height,'margin-left':left
		,'margin-top':top}" :class="vsr?'border-index':''">
			<view  class="flex-row-center" style="width: 45rpx;height: 45rpx;">
				<view  v-show="!vsr" class="dh-wt">
					
				</view>
				<view v-show="vsr"  class="cuIcon-roundcheck" style="font-size: 45rpx;color: #07C160;">
					
				</view>
			</view>	
			<text :class="vsr?'ttcl':''" style="color: #5a5a5a;" >{{vsrtx}}</text>
			<view class="cuIcon-safe text-gray">
				
			</view>
		</view>
	</view>
</template>

<script>
	const phone=uni.getSystemInfoSync() 
	// const l=getApp().globalData.l
	const l=phone.screenWidth/750
	export default {
		name:"verification",
		created() {
			// this.scHight=getApp().globalData.screenHeight/2-200+"px"
			
			// 可自行调整
			this.scHight=phone.screenHeight/2-200+"px"
			this.getCode()
			// 监听是否要重新验证
			uni.$on('vert',(data)=>{
			       this.vsr=data
				   this.vsrtx="点击进行验证"
				   this.getCode()
			   })
		},
		props:{
			height:{
				type:String,
				default:"80rpx"
			},
			width:{
				type:String,
				default:"350rpx"
			},
			left:{
				type:String,
				default:"180rpx"
			},
			top:{
				type:String,
				default:"30rpx"
			}
		
		},
		data() {
			return {
				token:"",
				vsrtx:"点击进行验证",
				vsr:false,
				hid:true,
				col:"#838383",
				movePv:0,
				hasImg:"拖动滑块已完成拼图",
				spcode:"",
				tl:0,
				moveCode:0,
				moveX:0,
				th:'',
				tw:'',
				ph:"",
				pw:"",
				scHight:0,
				img:"../../static/headPic.jpg",
				imgbk:"../../static/headPic.jpg",
				endLoad:true
			}
		},
		methods: {			
			hide(){
				if(!this.vsr){
					// vsr判断是否验证成功，成功隐藏验证框
					this.hid=!this.hid
				}
				
			},
			// 获取验证图片
			getCode(){
				this.col="#b3afae"
				this.hasImg="图片加载中..."
				uni.request({
					url:this.$testUrl+"vst/getPic",
					success:(res)=>{
						this.col="#838383"
						this.hasImg="拖动滑块已完成拼图"
						var dt=res.data
						// base64的图片
						this.img=dt.backImage
						this.imgbk=dt.slidingImage
						// 根据参数动态适应验证图片的高宽
						this.imgbKH=dt.yHeight*1.8+"rpx"
						this.th=dt.th*1.8+"rpx"
						this.tw=dt.tw*1.8+"rpx"
						this.ph=dt.qh*1.8+"rpx"
						this.pw=dt.qw*1.8+"rpx"
						// 适应比率，用来适应滑动距离
						this.tl=(1/(1.8*l))
						// 无用信息
						this.spcode=dt.capcode
						// 验证令牌
						this.token=dt.token
					}
				})
			},
			end(e){		
				this.endLoad=false
				// 验证拼图位置是否正确
				uni.request({
					url:this.$testUrl+"vst/checkcapcode",
					data:{
						// 这里要用rsa加密;就要把数字变成字符串,否则后端会接收不到
						xpos: this.$resJm(parseInt(this.moveCode*this.tl)+""),
						// 无用信息
						capcode:this.spcode+"",
						// 验证令牌
						tk:this.token
					},
					success:(res)=>{	
						this.endLoad=true
						// console.log(res.data)
						if(res.data==1){
							// 验证成功后把token发送出去,后端会把验证信息存在缓存里
							this.$emit("send",this.token)
							this.hide()
							this.vsr=true
							this.vsrtx="已通过验证"
											
						}else if(res.data==0){
							this.$msg("尝试次数过多!")
							this.getCode()
						}
						else if(res.data==2){
							this.hasImg="请拖动到正确的位置"
							this.col="#d94316"																				
						}else{
							this.$msg("身份已过期,请重新验证!")
							this.getCode()
						}
						// 让滑块回到起始位置
						if(this.movePv==1){
							this.movePv=0
						}else{
							this.movePv=1
						}	
					},fail:(res)=>{
						this.$msg("连接服务器失败")
					}
				})
			},
			// 绑定拼图位置
			moveChange(e){
				this.moveX=e.detail.x
				this.moveCode=e.detail.x
			}
		}
	}
</script>

<style>
.dh-wt{
	animation:at 1.1s ease;
	animation-iteration-count:infinite;
	animation-direction:alternate;	
	background-color: #1BCAA7;
	border-radius: 50%;
}

@keyframes at
{
from {width: 27rpx;height: 27rpx;}
to {width: 45rpx;height: 45rpx;}
}

.ttcl{
	color: #20b087;
}
.border-index{
	border: 1rpx solid #23c595;
}
</style>
